import React, { useRef, useState, useEffect } from 'react';
import {
    Input,
    Select,
    Form,
    Modal
} from 'antd';
import api from '@/api/apiList'
import { ValidationRules } from '@/utils'
import { storage } from '@/utils/storage'
import { connect } from 'react-redux'
import { YzhModal, YzhEmpty } from '@com'
import {
    ADD_TABS,
    REMOVE_TABS,
    CHANGE_TABS,
    FILTER_TABS,
} from '@/store/actionTypes'
const { confirm } = Modal;
const { Option } = Select;
const { TextArea } = Input;
const AccessDialog = (props) => {
    const [form] = Form.useForm();
    const [state, setState] = useState({
        visible: props.visible
    });
    useEffect(() => {
        setState({
            ...state,
            visible: props.visible
        })
        console.log('props data:', props.data);
    }, [props.visible])
    const onSubmit = (values) => {
        setState({
            ...state,
            visible: false,
        })
        props.onOk()
        console.log('Validate values:', values);
        return Promise.resolve(values)
        // return Promise.reject(values)
    }
    const { visible } = state
    return (
        <YzhModal
            visible={visible}
            props={{
                centered: true,
                width: 600,
                maskClosable: false,
                wrapClassName: 'access-modal',
                title: '自定义范围'
            }}
            form={{
            }}
            onOk={onSubmit}
            onCancel={() => {
                setState({
                    ...state,
                    visible: false,
                })
                props.onCancel()
            }}
        >
            {/* <Form.Item
                label="角色名称"
                name="name"
                rules={[{ required: true, message: '请填写角色名称' }]}
            >
                <Input placeholder="请填写角色名称" />
            </Form.Item>
            <Form.Item
                label="角色介绍"
                name="description"
                rules={[{ required: false, message: '请输入角色介绍' }]}
            >
                <TextArea placeholder="请填写角色介绍" showCount maxLength={100} />
            </Form.Item> */}
            <YzhEmpty />
        </YzhModal>
    );
};
//需要触发什么行为
function mapDispatchToProps (dispatch, props) {
    return {
        filterTabs: (value) => {
            dispatch({
                type: FILTER_TABS,
                value,
                ...props
            })
        },
        logout: (value) => {
            dispatch({
                type: 'logout',
                value,
                ...props
            })
        },
    }
}
export default connect(() => ({}), mapDispatchToProps)(AccessDialog);